<template>
  <el-dialog
    title="添加用户"
    :visible.sync="dialogVisible"
    @close="dialogClose"
    width="80%">
    <el-row >
      <el-col :md="6" :sm="24" class="leftOrgTree" >
        <cr-org-tree v-model="orgObj" :treeHeight="leftOrgTreeHeight"></cr-org-tree>
      </el-col>
      <el-col :md="18" :sm="24">
        <div class="table-page-search-wrapper">
          <!--搜索-->
          <el-form inline :model="queryParams" @submit.native.prevent>
            <el-row :gutter="48">
              <!-- 搜索item项 -->
              <el-col :md="8" :sm="24">
                <el-form-item label="姓名" prop="keyword">
                  <el-input
                    v-model.trim="queryParams.name"
                    placeholder="请输入姓名"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :md="8" :sm="24">
                <el-form-item label="用户名" prop="keyword">
                  <el-input
                    v-model.trim="queryParams.userName"
                    placeholder="请输入用户名"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :md="(isAdvanced && 8) || 0" :sm="(isAdvanced && 24) || 0">
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model.trim="queryParams.mobile"
                    placeholder="请输入手机号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <!-- 查询按钮 -->
              <el-col :md="(!isAdvanced && 8) || 24" :sm="24">
                <el-form-item>
                  <span
                    class="table-page-search-submitButtons"
                  >
                    <el-button type="primary" @click="handleSearch">查 询</el-button>
                    <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div class="selectUserBox" v-if="tableSelectionList.length > 0">
            <div class="label">已选择用户</div>
            <!-- <el-tabs type="card" v-if="tableSelectionList.length > 0" editable @tab-remove="handleTabsEdit"> -->
            <el-tabs type="card" >
              <el-tab-pane v-for="tag in tableSelectionList" :name="String(tag.id)" :label="tag.name" :key="tag.id">
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div class="table-block">
          <el-table
            :data="tableList"
            @selection-change="handleSelectionChange"
            ref="tableRef1"
            stripe
            row-key="id"
            :height="isAdvanced ? isAdvancedtableMaxHeigth : tableMaxHeigth">
            <el-table-column type="selection" width="55" reserve-selection align="center"/>
            <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip/>
            <el-table-column prop="userName" label="用户名" align="center" show-overflow-tooltip />
            <el-table-column prop="fullNames" label="全路径" align="center" show-overflow-tooltip />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getTableList"
          />
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUserList } from '@/api/userManage'
import { addUserPerm } from '@/api/authorityManage'
export default {
  name: 'AddUserDialoag',
  props: {
    orgRoleId: {
      type: Number,
      require: true,
      default: () => 0
    }
  },
  data () {
    return {
      dialogVisible: false,
      isAdvanced: false,
      leftOrgTreeHeight: 500,
      tableMaxHeigth: 330,
      isAdvancedtableMaxHeigth: 317,
      orgObj: {},
      tableList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        name: '',
        userName: '',
        mobile: '',
        pageSize: 10,
        orgId: ''
      },
      tableSelectionList: []
    }
  },
  watch: {
    orgObj: {
      handler: function (newVal) {
        if (!newVal?.id) return
        this.queryParams.orgId = newVal.id
        this.getTableList()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
  async handleSubmit () {
      if (this.tableSelectionList.length <= 0) {
        return this.$message.error('用户不能为空')
      }
      const userIds = this.tableSelectionList.map(v => v.id)
      await addUserPerm({ orgRoleId: this.orgRoleId, userIds })
      this.$emit('getOrgRoleUserListData')
      this.dialogVisible = false
      this.$message.success('操作成功')
    },
    handleSelectionChange (val) {
      this.tableSelectionList = val
    },
    handleTabsEdit (tab) {
      console.log(tab, 'targetName, action')
      const findObj = this.tableSelectionList.findIndex(v => v.id === Number(tab))
      this.$nextTick(() => {
        this.$refs.tableRef1.toggleRowSelection(findObj, false)
      console.log(this.tableSelectionList, 'targetName, action')
      })
    },
    open () {
      this.dialogVisible = true
      this.tableSelectionList = []
      this.queryParams.name = ''
      this.queryParams.userName = ''
      this.queryParams.mobile = ''
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.$nextTick(() => {
        this.$refs.tableRef1.clearSelection()
      })
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      console.log(this.queryParams, 'this.queryParams')
      const res = await getUserList(this.queryParams)
      console.log('列表数据', res)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    // 重置
    resetQuery () {
      this.queryParams.name = ''
      this.queryParams.userName = ''
      this.queryParams.mobile = ''
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.getTableList()
    },
    dialogClose () {
      this.$emit('changeStatus', false)
    }
  }
}
</script>
<style scoped lang="scss">
.table-page-search-wrapper{
  padding-top: 0;
}
.leftOrgTree{
  border: 1px solid #e8e8e8;
  padding: 10px;
}
::v-deep .el-tabs__content{
  display: none;
}
::v-deep .el-tabs__new-tab{
  display: none;
}
::v-deep .el-tabs__item{
  font-size: 12px;
}
::v-deep .el-tabs__header {
  margin-bottom: 0;
}
.selectUserBox{
  display: flex;
  align-items: center;
  .label{
    margin-right: 8px;
    width: 80px;
    font-size: 14px;
    font-weight: 600;
  }
  .el-tabs{
    width:  calc(100% - 80px);
  }
}
</style>
